<template>
	<div class="recommend">
		<div class="hotlist">
			<div class="list-header">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
				<span class="hotlist-text">本周热门榜单</span>
				<a href="" class="alllist">全部榜单</a>
			</div>
			<ul class="hotlist-content">
				<router-link 
				tag='li'
				class="hotlist-content-li" 
				v-for='item of hotList' 
				:key=item.id
				:to="'/detail/'+item.id"
				>
					<a href="">
						<img v-if=item.isHot class="hot-icon" :src="item.hotIcon" alt="">
						<img class="hot-img"  :src="item.hotImg" alt="">
						<p class="hot-sight">{{item.hotSight}}</p>
						<p class="price">{{item.price+'起'}}</p>
					</a>
				</router-link>
			</ul>
		</div>
		<div class="like">
			<div class="like-title">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
				<span>猜你喜欢</span>
			</div>
			<ul class="like-content">
				<li class="like-content-li" v-for='item of likeList'>
					<div class="like-li-left">
						<img class="like-img" :src="item.likeImg" alt="">
						<div v-if=item.isReserve style="background-image:url(item.likeIcon)">{{item.reserve}}</div>
					</div>
					<div class="like-li-right">
						<p class="view-spot-name">{{item.viewSpotName}}</p>
						<div class="evaluate-info">
							<span class="start">{{item.start}}</span>
							<span class="comment">{{item.comment}}</span>
						</div>
						<div class="like-price">
							<span class="price">{{item.price}}</span>
							<span class="addres">{{item.addres}}</span>
						</div>
						<div class="feature" v-if=item.isFeature>
							{{item.feature}}
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		name:'HomeRecommend',
		props:{
			hotList:{
				type:Array,
				required:true
			},
			likeList:{
				type:Array,
				required:true
			}
		
		}
	}
</script>
<style lang="stylus" scoped>
	.hotlist{
		margin-top: .2rem;
		background-color: #fff;
	}
	.list-header{
		position: relative;
		width: 100%;
		height: .44rem;
		padding: .24rem 0 .26rem;
		font-size: .32rem;
	}
	.list-header img{
		width: .3rem;
		height: .3rem;
		margin-left: .2rem;
	}
	.hotlist-text{
		margin-left: .08rem;
	    height: .44rem;
	    color: #212121;
	    font-size: .32rem;
	    line-height: .44rem;
	}
	.alllist{
	    position: absolute;
	    top: .36rem;
	    right: .32rem;
	    color: #616161;
	    font-size: .24rem;
	    line-height: .28rem;
	}
	.hotlist-content{
		padding: 0 .24rem;
		overflow-x: scroll;
		white-space: nowrap
	}
	.hotlist-content-li{
		position: relative;
	    display: inline-block;
	    padding: .06rem 0 .2rem;
	    width: 2rem;
	    font-size: .24rem;
	}
	.hotlist-content-li:not(:first-child){
		margin-left: .12rem;
	}
	.hot-icon{
		position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    overflow: hidden;
	    width: .84rem;
	    height: .4rem;
	}
	.hot-img{
		display: block;
	    overflow: hidden;
	    width: 2rem;
	    height: 2rem
	    opacity: 1;
	}
	.hot-sight{
	    margin-top: .12rem;
	    color: #212121;
	    font-size: .24rem;
	    line-height: .32rem;
	    text-align: center;
	}
	.price{
	    color: #616161;
	    font-size: .24rem;
	    line-height: .36rem;
	    text-align: center;
	}
	.like{
		margin-top: .2rem;
		background-color: #fff;
	}
	.like-title{
    	padding: .24rem 0 .26rem;
    	height: .44rem
	}
	.like-title img{
		float: left;
	    overflow: hidden;
	    width: .3rem;
	    height: .3rem;
	    margin-left: .2rem;
	    vertical-align: top;
	}
	.like-title span{
	    float: left;
	    margin-left: .08rem;
	    height: .44rem;
	    color: #212121;
	    font-size: .32rem;
	    line-height: .44rem;
	}
	.like-content{
	    margin-left: .24rem;
	}
	.like-content-li{
	    position: relative;
	    overflow: hidden;
	    padding: .2rem 0;
	}
	.like-li-left{
	    float: left;
	    overflow: hidden;
	    width: 2rem;
	    height: 2rem;
	}
	.like-li-right{
	    overflow: hidden;
	    padding-left: .22rem;
        font-size: .28em;
	}
	.like-img{
		width: 100%;
		height: 100%;
	}
	.view-spot-name{
		margin-top: .26rem;
	    height: .44rem;
	    color: #212121;
	    font-size: .32rem;
	    line-height: .44rem;
	}
	.evaluate-info{
	    margin-top: .14rem;
	    height: .34rem;
	}
	.evaluate-info .start{
	  	font-size: .26rem;
	}
	.comment{
		color: #616161;
	    font-size: .24rem;
	    line-height: .34rem;
	    margin-left: .1rem;
	}
	.like-price{
		position: relative;
		margin-top: .22rem;
	    color: #616161;
	    font-size: .24rem;
	    line-height: .4rem;
	}
	.like-price .addres{
	    position: absolute;
	    right: .24rem;
	    bottom: 0;
	}
	.like-price .price{
		color: #ff8300;
		font-size: .4rem; 
	}
	.feature{
	    display: inline-block;
	    margin-top: .48rem;
	    margin-right: .24rem;
	    background: #fff9f9;
	    padding: .04rem .1rem;
	    color: #f55;
	    font-size: .24rem;
	    line-height: .34rem;
	}
</style>
